import React, { useEffect, useState } from 'react';
import { connect } from 'dva';
import { history } from 'umi';
import { Radio, DatePicker, Button } from 'antd';
import CustomCalendar from '@/components/CustomCalendar';
import moment from 'moment';
import zhCN from 'antd/es/date-picker/locale/zh_CN';
import style from '@/pages/IndexPage.css';

function CostCalender({ dispatch, user, cost }){
    let { authorized } = user;
    const [type, setType] = useState('year');
    const [dataType, setDataType] = useState('cost');
    const [currentDate, setCurrentDate] = useState(moment(new Date())); 

    return (
        <div className={style['page-container']}>
            <div style={{ height:'40px', display:'flex', justifyContent:'space-between' }}>
                <div>
                    <Radio.Group value={type} className={style['custom-radio']} style={{ marginRight:'1rem' }} onChange={e=>setType(e.target.value)}>
                        <Radio.Button value='year'>年预算</Radio.Button>
                        <Radio.Button value='month'>月预算</Radio.Button>
                    </Radio.Group>
                    {/* <Radio.Group value={dataType} className={style['custom-radio']} style={{ marginRight:'1rem' }} onChange={e=>setDataType(e.target.value)}>
                        <Radio.Button value='energy'>能耗</Radio.Button>
                        <Radio.Button value='cost'>成本</Radio.Button>
                    </Radio.Group> */}
                    <DatePicker locale={zhCN} allowClear={false} className={style['custom-date-picker']} picker={type} value={currentDate} />
                </div>
                <div>
                    <Button type='primary' onClick={()=>history.push('/info_manage/quota_manage')}>预算设置</Button>
                    
                </div>
            </div>
            <div style={{ height:'calc( 100% - 40px)' }}>
                <CustomCalendar 
                    currentDate={currentDate}
                    mode={type}
                    onChangeDate={date=>setCurrentDate(date)}
                />
            </div>
        </div>
    )
}

export default connect(({ user, cost })=>({ user, cost }))(CostCalender);